<template>
  <div class="phone-container" v-permission="[state.permissionType.sysAdmin, state.permissionType.pageData_page3]">
    <div class="top">
      <div class="title">销售订单生产进度 <span></span></div>
    </div>
    <a-form label-width="50px" style="padding: 10px">
      <a-row :gutter="10" style="margin-bottom: 10px">
        <a-col :span="12">
          <a-input v-model="state.sd.csocode" placeholder="销售订单号"/>
        </a-col>
        <a-col :span="12">
          <a-input v-model="state.sd.cinvname" placeholder="存货名称"/>
        </a-col>
      </a-row>
      <a-row :gutter="10">
        <a-col :span="12">
          <a-input v-model="state.sd.ccusname" placeholder="客户名称"/>
        </a-col>
        <a-col :span="6">
          <a-button size="small" type="primary" class="ml10" @click="searchData">
            <template #icon><icon-search /></template>查询
          </a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.jinDuList">
      <template #columns>
        <a-table-column title="订单情况" width="55%">
          <template #cell="{ record }">
            <span>订单号:{{record.cSoCode}}</span> <br/>
            <span>客户名称:{{record.cCusName}}</span> <br/>
            <span>存货名称:{{record.cInvName}}</span> <br/>
            <span style="color: #f56c6c">订单数量:{{record.isll}}{{record.cComUnitName}}</span>
          </template>
        </a-table-column>
        <a-table-column title="进度情况" width="45%">
          <template #cell="{ record }">
            <span>下料出库:{{record.xwhMapStr}}</span><br/>
            <span>锻压完成:{{record.dwhMapStr}}</span><br/>
            <span>机加完成:{{record.jwhMapStr}}</span><br/>
            <span>成品完成:{{record.whMapStr}}</span><br/>
            <span>发货完成:{{record.fwhMapStr}}</span>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted} from "vue";
import PermissionType from "@/utils/PermissionType";

const state = reactive({
  permissionType : PermissionType,
  sd: {
    csocode: '',
    ccusname: '',
    cinvname: ''
  },
  jinDuList: [],
})
const searchData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    loadData();
  }else{
    Message.error("请输入查询条件")
  }
}
const loadData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    axios.post('/sal/listsomain', state.sd).then(res => {
      const { data } = res
      state.jinDuList = data
    })
  }else{
    state.jinDuList = [];
  }
}
onMounted(()=>{

})
</script>

<style scoped lang="less">

</style>
